<div class="content">
    <div id="example_title">
        <h1>Lock/Unlock Form</h1>
        You can lock/unlock individual pages or lock/unlock the whole form.
        <br>
        Note that unlocking the whole form will also unlock all individually locked pages.
    </div>
    <div id="example_view"></div>
    <div id="example_code"></div>
</div>

<!--CODE-->
<div id="form" style="width: 750px; height: 370px"></div>
<br>
<button class="w2ui-btn" onclick="action(1)">Lock page 0</button>
<button class="w2ui-btn" onclick="action(2)">Unlock page 0</button>
<button class="w2ui-btn" onclick="action(3)">Lock page 1, no message</button>
<button class="w2ui-btn" onclick="action(4)">Unlock page 1</button>
<button class="w2ui-btn" onclick="action(5)">Lock Form</button>
<button class="w2ui-btn" onclick="action(6)">Unlock Form</button>
<button class="w2ui-btn" onclick="action(7)">Lock Form, only spinner</button>

<!--CODE-->
<script type="module">
import { w2form, w2ui, w2popup, w2alert } from '__W2UI_PATH__'

let form = new w2form({
    box: '#form',
    name: 'form',
    header: 'Form with Tabs',
    url: 'server/post',
    fields: [
        { field: 'name.first', type: 'text', required: true,
            html: {
                page: 0,
                label: 'First Name',
                span: 4,
                attr: ''
            }
        },
        { field: 'name.last',  type: 'text', required: true,
            html: {
                page: 0,
                label: 'Last Name',
                span: 4,
                attr: ''
            }
        },
        { field: 'comments', type: 'textarea',
            html: {
                page: 0,
                label: 'Comments',
                span: 4,
                attr: 'style="width: 100%; height: 60px; resize: none"'
            }
        },
        { field: 'address1', type: 'text', required: true,
            html: {
                page: 1,
                groupStyle: 'width: 100%',
                label: 'Line 1',
                span: 4,
                attr: 'style="width: 200px"'
            }
        },
        { field: 'address2', type: 'text',
            html: {
                page: 1,
                label: 'Line 2',
                span: 4,
                attr: 'style="width: 200px"'
            }
        },
        { field: 'city', type: 'text', required: true,
            html: {
                page: 1,
                label: 'City',
                span: 4,
                attr: ''
            }
        },
        { field: 'state', type: 'text', required: true,
            html: {
                page: 1,
                label: 'State',
                span: 4,
                attr: ''
            }
        },
        { field: 'zip', type: 'int', required: true,
            html: {
                page: 1,
                label: 'Zip',
                span: 4,
                attr: ''
            }
        },
        { field: 'short_bio', type: 'textarea',
            html: {
                page: 2,
                column: 'after',
                label: 'Short Bio',
                attr: 'style="width: 90%; height: 60px; resize: none"'
            }
        },
        { field: 'talk_name', type: 'text', required: true,
            html: {
                page: 2,
                column: 'after',
                label: 'Talk Name',
                attr: 'style="width: 90%"'
            }
        },
        { field: 'description', type: 'textarea',
            html: {
                page: 2,
                column: 'after',
                label: 'Description',
                attr: 'style="width: 90%; height: 60px; resize: none"'
            }
        }
    ],
    tabs: [
        { id: 'tab1', text: 'General' },
        { id: 'tab2', text: 'Address' },
        { id: 'tab3', text: 'Other' }
    ],
    actions: {
        Reset() {
            this.clear();
        },
        Save() {
            if (form.validate().length == 0) {
                w2popup.open({
                    title: 'Form Data',
                    with: 600,
                    height: 550,
                    body: `<pre>${JSON.stringify(this.getCleanRecord(), null, 4)}</pre>`,
                    actions: { Ok: w2popup.close }
                })
            }
        },
        custom: {
            text: '<span style="font-size: 16px">←</span> click to see data',
            class: 'custom-class',
            style: 'background-image: none; background-color: transparent; border: 0px; margin: 0 0 0 -10px;',
            onClick() {
                w2alert('Not me!! The other button')
            }
        }
    }
})

window.action = function(action) {
    switch (action) {
        case 1:
            w2ui.form.lockPage(0, 'Message')
            break
        case 2:
            w2ui.form.unlockPage(0)
            break
        case 3:
            w2ui.form.lockPage(1)
            break
        case 4:
            w2ui.form.unlockPage(1)
            break
        case 5:
            w2ui.form.lock('Message', true)
            break
        case 6:
            w2ui.form.unlock()
            break
        case 7:
            w2ui.form.lock('', true)
            break
    }
}
</script>